/*
This is the class css for classes page
*/
/*form style*/
.frm-style{
      position: absolute;
        display: block;
        background: url('../img/site-icons.png') no-repeat -155px -67px;
        width: 11px;
        height: 7px;
}
span.locate-arrow1{
  @extend .frm-style;
  right: 5px;
  top: 14px;
}
span.locate-arrow2{
  @extend .frm-style;
  right: 20px;
margin-top: -20px;
}

/*
2)Main Section
*/
.classes-set{
   .container
    {
     max-width:1037px !important;
     margin: 0 auto;
    }
 }                  //classes container sizes standard
.classes-cont{
  .container{
    max-width:1020px !important;
    margin: 0 auto;
  }
}                  //classes container sizes change
.classes-padl{
  padding-left: 6px;
}
.classes-padr{
  padding-right: 19px;
}
/*floating section*/

.floater {
  width: 294px;
  height: 264px;
  background: white;
  position: fixed;
  z-index: 999;
  border: 2px solid black;
  left: -294px;
  top: 200px;
  padding: 27px; }
  .floater .input-group {
    width: 100%; }
    .floater .input-group select, .floater .input-group input {
      border: 2px solid black;
      border-radius: 0;
      margin-bottom: 12px; }
  .floater a {
    padding: 10px 8px;
    background-color: black;
    margin-top: 7px;
    border: none;
    border-radius: 0;
    color: white;
    padding: 15px; }
#open-arrow{
    position: absolute;
    background: url('../img/search-button.png') no-repeat;
    height: 25px;
    width: 25px;
    text-decoration: none;
    right: -26px;
    top: -2px;
    cursor: pointer;

  }

#close-arrow {
    position: absolute;
    background: url('../img/prev-arrow.png') no-repeat;
    height: 25px;
    width: 25px;
    text-decoration: none;
    right: -2px;
    top: -2px;
    cursor: pointer;
}

/*============================*/
.class-top{
  padding-top: 91px;
  @media(width:$mobile){
    padding-top:160px
  }
  @media(width:$mobile-max){
    padding-top:140px
  }
  @media(width:640){
    padding:115px;
  }
}
#basket{
   position: relative;
   float: left; 
   width:100%; 
}
@media (min-width: 1200px) {
.basket-left{
    position: relative;
    float: left;
    min-height: 1px;
    width:47%;
}
.basket-right{
    position: relative;
    float: left;
    min-height: 1px;
    width:53%;
    padding-right: 22px;


}
}   //should be change in main css
   #basket_caption{
   	position: absolute;
   	top:0;
   	background-color: rgba(230, 230, 230, 0.7);
   		font-family: $lgr;
   		font-size: 24px;
   		color: $black;
   		text-transform: uppercase;
   		padding: 3px 24px;
 }
#basket_content{
		color: $dark_grey;
		font-size: 12px;
		font-family: $verdana;
	span{
		font-weight: bold;
	}
	h3{
		font-family: $lgr;
		font-size: 59px;
		color: $black;
		text-transform: uppercase;
		padding: 3px 0;
    @media(min-width: $mobile) and (max-width: $mobile-max){
      font-size: 30px;
    }
	}
	hr{
		border-top: 2px solid #090808;
        margin-top: 10px;
        margin-bottom: 10px;
	}
}

#content_flist{
	float:left;
	width: 100%;
	border-bottom: 2px solid $black;
	padding-bottom: 13px;
    margin-bottom: 7px;
    padding-left: 0;
	li{
       position: relative;
		   float: left;
	     color: $black;
	     list-style: none;
	     font-size: 12px;
	     font-family: verdana;
	}
	li:first-child{
		padding-right: 16px;
		border-right: 2px solid $dark_grey;
	}
	li:nth-child(2){
		padding-left: 16px;
	}
}
.meter{
    padding: 0px;
    margin: 0;
}
#content_slist{
    float: left;
    width: 100%;
    padding: 0px;
    margin: 0;
	       li{
		    float: left;
			color: $black;
			font-size: 10px;
			font-family: verdana;
			text-transform: uppercase;
			font-weight: bold;
			display: block;
			position: relative;
			text-align: center;
		small{
			display: block;
			color: $dark_grey;
			font-size: 10px;
			font-family: verdana;
		}
		span{
			margin-left: 14px;
		}
		&:first-child{
				span{
				  background: url(../img/site-icons.png) no-repeat -166px -130px;
                height: 40px;
                width:40px;
                display: block;
			}
		}
		&:nth-child(2){
            padding-left: 35px;
            @media (min-width: $mobile) and (max-width: $mobile-max){
          padding-left:24px;
                
        }
		     span{
                 background: url(../img/site-icons.png) no-repeat -244px -140px;
				height: 10px;
				width:40px;
				display: block;
                margin: 15px 10px;
		     }
		}   
		&:nth-child(3){
            float: right;
		     span{
                   background: url(../img/site-icons.png) no-repeat -344px -130px;
                height: 40px;
                width:40px;
                display: block;
                margin-left: 38px;
		     }
		}    
	}
}
.progress{
    height: 14px;
    border-radius: 0px;
    margin-top: 7px;
    margin-bottom: 10px;
    float: left;
    position: relative;
    
    width:100%;
    .progress-perc{
      float:left;
      width: 100%;
      list-style: none;
      color: $white;
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      font-family: $verdana;
      padding-left: 0;
      li{
         float: left;
         padding-left: 5px;
         line-height: 12px; 
         &:nth-child(2){
          float:right;
          line-height: 12px;
          padding-right: 5px;
         }
      }
    }
}
.progress-bar-second{
        background-color: $black;
        background-image: -webkit-gradient(linear,left 0,left 100%,from($black),to($black));
        background-image: -webkit-linear-gradient(top,$black,0%,$black,100%);
        background-image: -moz-linear-gradient(top,$black 0,$black 100%);
        background-image: linear-gradient(to bottom,$black 0,$black 100%); 
        background-repeat: repeat-x;
    }
.progress-bar-first{
        background-color: $yellow;
        background-image: -webkit-gradient(linear,left 0,left 100%,from($yellow),to($yellow));
        background-image: -webkit-linear-gradient(top,$yellow,0%,$yellow,100%);
        background-image: -moz-linear-gradient(top,$yellow 0,$yellow 100%);
        background-image: linear-gradient(to bottom,$yellow 0,$yellow 100%); 
        background-repeat: repeat-x;
    }
#progress-content{
    width:100%;
    position: relative;
    padding:0px;
    li{
        float: left;
        list-style: none;
        font-weight: bold;
        font-size: 10px;
        font-family: $verdana;
        text-transform: uppercase;
        max-width: 60px;
        color: $black;
        &:nth-child(2){
          float:right;
          text-align: right;
        }
    }
}
/*
   custom check box
*/
.basket-check{
    font-size: 12px;
    color: $black;
    font-family: $verdana;   
    label{
       font-weight: bold; 
    }
    input[type="checkbox"]{
       display: none;
       }
     input[type="checkbox"] + label:before {
         background-color: $white;
         border: 2px solid $black;
         content:"";
         display: inline-block;
         font-size: 12px;
         height: 20px;
         width:20px;
         line-height: 16px;
         vertical-align: middle;
         margin:-2px 6px 0 -20px;
     } 
      input[type="checkbox"]:checked + label:before {
        content:"\2713";
        text-align: center;
      }
    }
    #basket-button{
        float: left;
        padding: 0;
        padding-top: 5px;
        @media (min-width: $mobile) and (max-width: $mobile-max){
          float:none;       
        }
        li{
            float: left;
            list-style: none;
            padding-left: 15px;
            @media (min-width: $mobile) and (max-width: $mobile-max){
             width: 100%;
             text-align: center;
             padding-left: 0;
             border-bottom: 2px solid $white;        
            }
            &:first-child{
                padding-left:0px;
            }
            a{
                @include button($yellow,$black,$black,$white);
                font-size: 10px;
                color: $black;
                font-family: $verdana;
                padding: 19px 27px;
                display: block;
                margin-top: 0px;
                text-transform: uppercase;
                font-weight: bold;
                 @media (min-width: $mobile) and (max-width: $mobile-max){
                 padding:12px 30px;
                 }
            }    
        }

    }
 /*====main-tab section start here
  ================================
 */

    .my_nav{
        border: 0px;
        max-width: 575px;
         @media (min-width: $mobile) and (max-width: $mobile-max){
          width:100%;
          margin-top: 70px;

         }
        li{
             padding-left: 6px;
             margin-bottom: 2px;
             cursor:pointer;
              @media (min-width: $mobile) and (max-width: $mobile-max){
               float:none;
               padding-left: 0;
               border-bottom: 2px solid $white;
              }
              @media (min-width: 500px) and (max-width: $tablet){
                padding-left: 7px;   
              }
             &:first-child{
              padding-left:0px; 
             }
            a{

              background-color: $black;
              color: $white;  
              border-radius: 0px;
              font-family: $verdana;
              padding: 12px 5px;
              font-weight: bold;
              font-size: 10px;
              text-transform: uppercase;
               @media (min-width: $mobile) and (max-width: $mobile-max){
                padding: 5px 6px 16px 5px;
                text-align: center;
               }
              &:hover{
                 background-color:$yellow;
                 color: $black;
              }
                
            }
          } 
       }
       .main-tab{
       .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
         background-color:$yellow;
                 color: $black;
       }    
       .tab-content{
         @media (min-width: $mobile) and (max-width: $tablet){
            margin-bottom: 40px;
          }
          @media (min-width: $tablet) and (max-width: $tablet-max){
           margin-top: 10px;   
         }
       }
   }
   /*infor content*/
   .infor-content{
     color: $black;
     height: 544px !important;
     max-width: 571px;
     overflow-y:scroll;
     padding-right: 15px;
            h5{
                font-family: $lgr;
                font-size: 30px;
                text-transform: uppercase;
                padding-top: 20px;
                padding-bottom: 20px;
            }
            p{
                font-family: $verdana;
                font-size: 13px;
                color: $dark_grey;
            }
   }
   .infor-list{
                padding: 0px;
                padding-top: 20px;
                list-style: none;
                li{
                    color: $dark_grey;
                    font-size: 13px;
                    &:before{
                        content:" ";
                        height:12px;
                        width: 12px;
                        border-radius: 50%;
                        display: inline-block;
                        background-color: $yellow;
                        margin-right: 10px;
                     } 
                    
                 }
            }
 /*
  picture class
  */
    .picture-content{
         height: 544px !important;
         max-width: 571px;
       overflow-y:scroll;
       .owl-theme .owl-controls .owl-buttons div{
        background-color: $yellow;
        filter: Alpha(Opacity=50%);
        color:$black;
        opacity:1;
        font-weight: bold;
        border-radius: 0px;
       }
        a{
            margin-top: 50px;
            float: left;
            width: 100%;
        }
        #owl-pictab .item img{
    display: block;
    width: 100%;
    height: auto;
    padding:20px;
     }

    }  
 /*
   review class
 */
   .review-content{
     height: 544px !important;
       overflow-y:scroll;
       max-width: 571px;
       padding-top: 20px;
   &>.single-reviewtab{
    list-style-type: none;
    overflow: hidden;
    position: relative;
    max-width: 360px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid $light_grey;
   a{
    float: left;
    width: 100%;
   }
  img{
    float: left;
    width: 70px;
    height: 75px;
    margin-right: 7px;
    overflow: hidden;
}
}
}
.reviewtab-info{
    color: $dark_grey;
    font-family:$verdana;
    font-size: 13px;
    .review-name{
      font-weight: bold;
    }

}
.review-time{
    padding-left: 15px;
}
/*
 trainer
*/
.trainer-content{
  max-width: 571px;
       height: 544px !important;
       overflow-y:scroll;
       padding-top: 20px;
       padding-right: 15px;
       color: $black;
       h4{
          font-family: $lgr;
          text-transform: uppercase;
          font-size: 30px;
       }
       p{
         color: $dark_grey;
         font-family: $verdana;
         font-size: 13px;
         padding-top: 10px;
       }
       &>.single-trainertab{
        list-style-type: none;
    overflow: hidden;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
        img{
        float: left;
        width: 225px;
        height: 260px;
        margin-right: 7px;
        overflow: hidden;
        }
    }
}
.trainertab-info{
    color: $black;
    font-family:$verdana;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 15px;
    float:left;
    a{
         @include button($black,$white,$yellow,$black);
         padding: 15px 30px; 
         @media (min-width: $mobile) and (max-width: $mobile-max){
          padding:10px 5px;
        
        }
    }
}
.trainer-inner{
     color: $black;
    font-family:$verdana;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid $light_grey;
    span{
        display: block;
        color: $dark_grey;
        font-weight: normal;
    }
}
/*
 vebue content
*/
.venue-content{
  max-width: 571px;
  height: 544px !important;
       overflow-y:scroll;
       /*overflow-x:hidden; */
       .venue-wrapper{
        float: left;
        .carousel-control{
          color: $black;
          height:2%;
          &.my-right{
            right:10%;
          }
          .glyphicon-chevron-right{
            top:-35px;
          }
          .glyphicon-chevron-left{
            top:-35px;
          }
        }
         .venue-slide{
          float:left;
          margin-right: 10px;
           padding-left: 10px;
      padding-top: 15px;
      border: 2px solid black;
      max-width: 170px;
      height: 150px;
      &.active{
        background-color: $black;
        a{
          color: $white !important;
        }
      }

      a{
        color: $black;
        font-family: $lgr;
        font-size: 30px;
        text-transform: uppercase;
        
        address{
            font-family: $verdana;
            font-size: 12px;
            text-transform: none;
         }
       }
         }
       }

  h4{
    font-family: $verdana;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: $black;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  &>#venue-list{
    padding-left: 0px;
    width: 1000px;
     height:170px !important;
     overflow-y: hidden !important;
     overflow-x: scroll !important; 
    li{
      list-style: none;
      float: left;
      padding-left: 10px;
      padding-top: 15px;
      margin-left: 10px;
      border: 2px solid black;
      max-width: 170px;
      height: 150px;
      @media (min-width: $mobile) and (max-width: $mobile-max){
         margin-left: 2px;
         margin-top: 3px;
        
       }
      &.active{
        background-color:$black;
        a{
        color: $white !important;
         }
      }
      &:first-child{
       margin-left: 0px;    
      }
      a{
        color: $black;
        font-family: $lgr;
        font-size: 30px;
        text-transform: uppercase;
       
        address{
            font-family: $verdana;
            font-size: 12px;
            text-transform: none;
         }
       }
     }
  }
} 
.venue-detail{
  color: $black;
  text-transform: uppercase;
  float: left;
  h4{
    font-family: $lgr;
    font-size: 30px;
    font-weight: bold;
  }
  .detail-start{
    h4{
      float:left;
    }
     a{
     @include button($black,$white,$yellow,$black);
     padding: 5px 15px;
     margin-top: 21px;
     margin-left: 10px;
     font-family: $verdana;
     font-size: 10px;
     font-weight: bold;
     float: left;
     }
  }
 
  .batch-detail{
    width:100% !important;
    tr{
      :first-child{
        padding-left: 0px;
        }
      }
    th{
      padding-left: 20px;
      font-size: 14px;
      font-family: $verdana;
    }
    td{
       padding-left: 20px;
       font-size: 12px;
       font-family: $verdana;
       color: $dark_grey;
    }
  }
}

/*
 book form
*/
.book_form{
    border: 2px solid $black;
    float: left;
    width:100%;
    position: relative;
    h4{
        font-family: $lgr;
        font-size: 30px;
        text-transform: uppercase;
        padding-top: 20px;
        padding-bottom: 20px;
        color: $black;
    }
    label{
        color: $black;
        font-family: $verdana;
        font-size: 12px;
        display: block;
        text-align: right;
        font-weight: normal;
    }
    
}

.my-area{
    background-color: black;
color: white;
height: 98px;
margin-bottom: 15px;
font-family: $verdana;
font-size: 12px;
width: 100%;
padding: 12px;
overflow:hidden;
}    
input[type=submit]{
      @include button($black,$white,$yellow,$black);
      border-radius: 0px;
      float: right;
      margin-top: 0px;
      font-family: $verdana;
      font-weight: bold;
      font-size: 10px;
      margin-bottom: 20px;
      text-transform: uppercase;
      padding: 16px;
    }
 /*==============
 REVIEW AND QUERY
=================*/
.review-main{
     .review-form{
           border-radius:0px !important;
        border:0px;
        resize:none;
        min-height:40px;
        &::-webkit-input-placeholder {
          font-size:13px;
          color: $dark_grey !important;
          font-family: $verdana;
             }

&:-moz-placeholder { /* Firefox 18- */
  font-size:13px;
                   color: $dark_grey !important;
          font-family: $verdana;
}

&::-moz-placeholder {  /* Firefox 19+ */
  font-size:13px;
                color: $dark_grey !important;
          font-family: $verdana;
}

&:-ms-input-placeholder {  
  font-size:13px;
                   color: $dark_grey !important;
          font-family: $verdana;
}
        }
    .add-review{
      display: none;
      background-color: $light_grey;
      position: absolute;
      z-index:5;
      max-width: 382px;
      float: left;
      width: 100%;
        h4{
          font-family: $lgr;
          font-size: 45px;
          color: $black !important;
          text-transform: uppercase;
          padding-top: 20px;
        }
       
        hr{
          border-top: 2px solid $dark_grey;
          margin-bottom: 18px;
          margin-top: 12px;
        }
        span{
          float: left;
          cursor: pointer;
         margin-left: 10px;
        }
        .review-btn{
           @include button($black,$white,$yellow,$black);
          border-radius: 0px;
          padding: 12px 12px;
          font-family: $verdana;
          font-weight: bold;
          font-size: 10px;
          margin-bottom: 20px;
          float:left;
          text-transform: uppercase;
        }

    }
  .review-control{
    font-size: 12px;
  }
  .carousel-control
  {
    font-size:12px;

   &.right {
    background-color: $black;
    width: 14px;
    height: 15px;
    top:42px;
    margin-right:15px !important;
  }
  &.left {
    background-color: $black;
    width: 14px;
    height: 15px;
    right: 0;
    top:22px;
    left:auto;
    margin-right: 15px;
  }
}
}
.review{
   position:relative;
    #review-all{
           @include button($black,$white,$yellow,$black);
              font-family: "verdana";
              position: absolute;
              right: 0;
              top: 30px;
              margin-right: 60px;
              font-size: 10px;
              text-transform: none;
              padding: 3px 3px;
            font-weight: bold;
        }
    .vertical .carousel-inner {
  height: 100%;
     }

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 400px;
}

.carousel.vertical .prev {
  top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -400px;
}

.carousel.vertical .active.right {
  top: 400px;
}

.carousel.vertical .item {
    left: 0;
}
    background-color: $light_grey;
     @media (min-width: $mobile) and (max-width: $tablet){
       margin-bottom: 25px;
       margin-top: 25px;
     }

    h4{
       font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        text-transform: uppercase; 
         @media (min-width: $mobile) and (max-width: $mobile-max){
           font-size:30px; 
         }
    }
    hr{
        margin-top: 15px;
        margin-bottom: 16px;
        border-top: 2px solid $dark_grey;
    }
}
.single-review{
    list-style-type: none;
    margin: 0 0 7px 0;
    overflow: hidden;
    position: relative;
   a{
    float: left;
    width: 100%;
   }
  img{
    float: left;
    width: 54px;
    height: 54px;
    margin-right: 7px;
    overflow: hidden;
}
}
.review-info{
    color: $dark_grey;
    font-family:$verdana;
    font-size: 13px;
    &>.name{
      font-weight: bold;
    }

}
.query-form{
    background-color: $yellow;
     .class-form{
        border-radius:0px !important;
        border:0px;
        resize:none;
        min-height:40px;
         @media (min-width: $mobile) and (max-width: 1000px){
         margin-top: 8px;
         }
        &::-webkit-input-placeholder {
          font-size:13px;
          color: $dark_grey !important;
          font-family: $verdana;
             }

&:-moz-placeholder { /* Firefox 18- */
  font-size:13px;
                   color: $dark_grey !important;
          font-family: $verdana;
}

&::-moz-placeholder {  /* Firefox 19+ */
  font-size:13px;
                color: $dark_grey !important;
          font-family: $verdana;
}

&:-ms-input-placeholder {  
  font-size:13px;
                   color: $dark_grey !important;
          font-family: $verdana;
}
     }
    h4{
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 22px;
        text-transform: uppercase;
    }
    small{
        font-family: $verdana;
        font-size: 12px;
        color: $black;
    }
    hr{
        border-top: 2px solid $white;
        margin-top: 12px;
        margin-bottom: 18px;
    }
} 
.query-btn{
    @include button($black,$white,$light_grey,$black);
      border-radius: 0px;
      padding: 12px 12px;
      font-family: $verdana;
      font-weight: bold;
      font-size: 10px;
      margin-bottom: 20px;
      text-transform: uppercase;
      &:hover {
        background-color:$light_grey !important;
      }
}  
.query-control{
    border-radius: 0px;
    height: 45px;
    border: none;
}
/*====================
  people like slider
======================*/
.people-like{
    background-color: $light_grey;
   
}          
.people-head{
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        padding-bottom: 10px;
        text-transform: uppercase;
        @media (min-width: $mobile) and (max-width: $mobile-max){
         font-size:40px;
        
          }
            a{
               @include button($black,$white,$yellow,$black);  
               float: right;
            display: inline-block;
            margin-top: 25px;
            font-family: $verdana;
            font-size: 10px;
            text-transform: none;
            padding: 3px 3px;
            font-weight: bold;
            }
 }           
.single-people{
    /*padding-left: 20px;*/
    position: relative;
    single-inner{
      position: relative; 
    }
    img{
    border: 10px solid $white;
     }
     span{
            position: absolute;
            top:0;
            background-color: rgba(230, 230, 230, 0.7);
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        text-transform: uppercase;
        width: 92%;
        margin-top: 90px;
        padding: 3px 24px;
         @media (min-width: $mobile) and (max-width: $tablet){
           font-size:30px;
           width:99%;       
          }
          @media (min-width: 768px) and (max-width: 799px){
           width:84%;
        
           }
          @media (min-width: 800px) and (max-width: 980px){
           font-size:30px;
           width:96%;       
          }
        small{
            font-family: $verdana;
            font-size: 10px;
            display: block;
        }
     }
}

   
/*=============
literal slider
==============*/
.literal-like{
    background-color: $black;
        font-family: $lgr;
        font-size: 45px;
        color: $white;
        padding-top: 20px;
        padding-bottom: 10px;
        text-transform: uppercase;
        @media (min-width: $mobile) and (max-width: $mobile-max){
        font-size:40px;        
    }
}
#literal-btn{
      @include button($yellow,$black,$light_grey,$black);  
               float: right;
            display: inline-block;
            margin-top: 25px;
            font-family: $verdana;
            font-size: 10px;
            text-transform: none;
            font-weight: bold;
            padding: 3px 3px;
}
#literal-change{
    color: $yellow;
}
/*============
tags and recommendation
===============*/
.tag{
    h3{
         font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        padding-bottom: 20px;
        text-transform: uppercase; 
        @media (min-width: $mobile) and (max-width: $mobile-max){
        font-size:35px;       
     }
    }
    a{
       @include button($light-grey,$black,$black,$white); 
       float:left; 
       margin-right: 10px;
       font-family: $verdana;
       font-size: 12px;
       text-transform: uppercase;
       padding:12px 20px;
       margin-top: 12px;
  
    }
}
.recomend{
    h3{
         font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        text-transform: uppercase; 
        padding-bottom: 20px;
        @media (min-width: $mobile) and (max-width: $mobile-max){
         font-size:35px;    
        }
    }
    &>.recomend-sec{
        border: 2px solid $black;
        margin-top: 18px;
        font-family: $lgr;
        font-size: 24px;
        color: $black;
        text-transform: uppercase;
        padding: 20px;
    }
}
.recomend-people{
    float: left;
    span{
        background-color: $yellow;
        height: 60px;
        width: 60px;
        border-radius: 30px;
        font-size: 30px;
        padding-top: 10px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
}
.recomend-rating{
    float: right;
    margin: 10px 0px;
    @media (min-width: $mobile) and (max-width: $mobile-max){
       float:none;
    }
    span{
        color: $dark_grey;
    }
}

